---
import DefaultLayout from '@layouts/DefaultLayout.astro'
import PageHeader from '@components/PageHeader.astro'
import { Heading, Notification } from 'accessible-astro-components'
import { getCollection } from 'astro:content'

// Get all portfolio projects
const projects = await getCollection('projects')

// Define static pages with their descriptions
const staticPages = [
  {
    title: 'Home',
    url: '/',
    description: 'Welcome to our accessible website featuring modern web development and inclusive design principles.',
  },
  {
    title: 'Accessible components',
    url: '/accessible-components',
    description: 'A comprehensive showcase of accessible UI components and design patterns for modern web development.',
  },
  {
    title: 'Portfolio',
    url: '/portfolio',
    description: 'A collection of projects demonstrating accessible design and development practices.',
  },
  {
    title: 'Blog',
    url: '/blog',
    description: 'Articles and insights about web accessibility, development best practices, and inclusive design.',
  },
  {
    title: 'Contact',
    url: '/contact',
    description:
      'Get in touch with us for accessibility consulting, development services, or collaboration opportunities.',
  },
  {
    title: 'Color contrast checker',
    url: '/color-contrast-checker',
    description: 'An interactive tool to check color contrast ratios and ensure WCAG compliance for your designs.',
  },
  {
    title: 'Accessibility statement',
    url: '/accessibility-statement',
    description: 'Our commitment to accessibility and information about the accessibility features of this website.',
  },
  {
    title: 'Markdown page example',
    url: '/markdown-page',
    description: 'A demonstration of Markdown content rendering with accessible formatting and typography.',
  },
  {
    title: 'MDX page example',
    url: '/mdx-page',
    description: 'An example of MDX content combining Markdown with interactive React components.',
  },
  {
    title: 'Thank you',
    url: '/thank-you',
    description: 'Confirmation page for successful form submissions and user interactions.',
  },
]
---

<DefaultLayout
  title="Sitemap"
  description="Complete site map showing all pages, portfolio projects, and sections available on our accessible website."
>
  <PageHeader
    title="Sitemap"
    subtitle="A comprehensive overview of all pages and content available on our website, organized for easy navigation."
    bgType="gradient"
  />

  <section class="my-16">
    <div class="container space-y-12">
      <!-- Main Pages Section -->
      <div>
        <Heading level="h2" class="mb-6">Main pages</Heading>
        <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          {
            staticPages.map((page) => (
              <article>
                <Heading level="h3" size="h6" class="mb-3">
                  <a href={page.url}>{page.title}</a>
                </Heading>
                <p class="mb-3">{page.description}</p>
                <p class="text-xs">
                  URL:{' '}
                  <code class="rounded bg-neutral-100 px-1 py-0.5 text-xs text-neutral-500 dark:bg-neutral-800 dark:text-neutral-500">
                    {page.url}
                  </code>
                </p>
              </article>
            ))
          }
        </div>
      </div>

      <!-- Portfolio Projects Section -->
      <div>
        <Heading level="h2">Portfolio projects</Heading>
        <p class="mb-6">
          Explore our collection of {projects.length} accessibility-focused projects showcasing inclusive design and development
          practices.
        </p>
        <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          {
            projects.map((project) => (
              <article>
                <Heading level="h3" size="h6" class="mb-3">
                  <a href={`/portfolio/${project.id}`}>{project.data.title}</a>
                </Heading>
                <p class="mb-3">{project.data.description}</p>
                <div class="text-xs">
                  <p class="mb-1">
                    By: <span class="font-medium">{project.data.author}</span>
                  </p>
                  <p>
                    URL:{' '}
                    <code class="rounded bg-neutral-100 px-1 py-0.5 text-xs text-neutral-500 dark:bg-neutral-800 dark:text-neutral-500">
                      /portfolio/{project.id}
                    </code>
                  </p>
                </div>
              </article>
            ))
          }
        </div>
      </div>

      <!-- Blog Section -->
      <div>
        <Heading level="h2" class="mb-6">Blog</Heading>
        <article>
          <Heading level="h3" size="h6" class="mb-3">
            <a href="/blog"> Blog posts </a>
          </Heading>
          <p>
            Discover articles about web accessibility, development best practices, and inclusive design. Our blog
            features dynamic content with pagination for easy browsing.
          </p>
          <div class="text-xs">
            <p>Features: Dynamic content from JSONPlaceholder API</p>
            <p>
              Base URL: <code
                class="rounded bg-neutral-100 px-1 py-0.5 text-xs text-neutral-500 dark:bg-neutral-800 dark:text-neutral-500"
                >/blog</code
              >
            </p>
            <p>
              Individual posts: <code
                class="rounded bg-neutral-100 px-1 py-0.5 text-xs text-neutral-500 dark:bg-neutral-800 dark:text-neutral-500"
                >/blog/[post-title]</code
              >
            </p>
          </div>
        </article>
      </div>

      <!-- Technical Information -->
      <Notification type="info" variant="accent">
        <div class="space-content">
          <Heading level="h2" size="h6" class="mb-4">Technical sitemap information</Heading>
          <ul>
            <li>
              <span class="font-bold">XML Sitemap:</span> An automated XML sitemap is generated at
              <code>/sitemap.xml</code>
              for search engine optimization.
            </li>
            <li>
              <strong>Generated by:</strong> @astrojs/sitemap integration configured in astro.config.mjs
            </li>
            <li>
              <strong>Last updated:</strong> Automatically updated on each build
            </li>
          </ul>
        </div>
      </Notification>
    </div>
  </section>
</DefaultLayout>

<style>
  article {
    border: 1px solid var(--border-color-subtle);
    border-radius: var(--radius-large);
    background-color: var(--background-color);
    padding: 1rem;
  }
</style>
